<!--
 * @Description: 日历组件
-->
<template>
  <div class="calendar-component">
    <el-calendar v-model="selectedDate" @pick="handleDatePick">
      <template #date-cell="{ data }">
        <div :class="['calendar-cell', { selected: isSelected(data.day) }]">
          {{ data.day.split('-').pop() }}
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElCalendar } from 'element-plus'

interface Props {
  isOpen: boolean
  selected: string[]
  zhankai: boolean
  lockDay: string[]
  jiantouShow: boolean
  weekDayShow: boolean
  zuoyouShow: boolean
  titleShow: boolean
  multiple: boolean
}

const props = defineProps<Props>()

const emit = defineEmits<{
  getdate: [{ datestr: string }]
  lockdays: [{ lastMonthDays: any[]; nextMonthDays: any[] }]
}>()

const selectedDate = ref(new Date())

const isSelected = (date: string) => {
  return props.selected.includes(date)
}

const handleDatePick = (date: Date) => {
  const dateStr = date.toISOString().split('T')[0]
  emit('getdate', { datestr: dateStr })
}

// 暴露给父组件的方法
defineExpose({
  refresh1: (date: string) => {
    // 刷新日历
  },
  refresh2: (date: string) => {
    // 刷新日历
  },
  backtoday: () => {
    selectedDate.value = new Date()
  }
})
</script>

<style scoped lang="less">
.calendar-component {
  .calendar-cell {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &.selected {
      background-color: #409eff;
      color: #fff;
      border-radius: 50%;
    }
  }
}
</style>
